import { Button, Icon, Modal, Message, Divider } from "view-ui-plus";
import { defineComponent, nextTick, PropType, ref } from "vue";

const userAuthInfo = JSON.parse(localStorage.getItem("userAuthInfo"));

export default defineComponent({
  name: "permission-btn",
  props: {
    btnInfo: {
      type: Object,
      default: () => ({
        icon: "ios-checkmark-circle-outline",
        type: "success",
      }),
    },
    type: {
      type: String as PropType<"button" | "text">,
      default: "button",
    },
    title: {
      type: String,
      default: "权限按钮",
    },
    confirm: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: "确定删除吗",
    },
    //选中的表格数据
    selectItems: {
      type: Array,
      default: () => [],
    },
    // 进行选择判断
    isSelect: {
      type: String as PropType<"single" | "multiple" | undefined>,
      default: undefined,
    },
    // 进一步验证函数
    correctFn: {
      type: Function as PropType<(...res: any) => Promise<any>> | undefined,
      default: undefined,
    },
    // 回调函数
    callback: {
      type: Function as PropType<(...res: any) => Promise<any>> | undefined,
      default: undefined,
    },
    style: {
      type: Object,
      default: () => {},
    },
    authority: {
      type: String,
      default: null,
    },
    isDivider: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["click"],
  setup(props, { emit }) {
    const btnClick = async (e: Event) => {
      if (props.isSelect == "single") {
        if (props.selectItems.length !== 1) {
          Message.warning("请一条选择数据");
          return;
        }
      } else if (props.isSelect == "multiple") {
        if (props.selectItems.length === 0) {
          Message.warning("请选择数据");
          return;
        }
      }
      // 如果需要进一步验证 ，那就从外部传进函数
      if (props.correctFn) {
        try {
          await props.correctFn();
        } catch (error) {
          Message.warning(error);
          return;
        }
      }
      if (props.confirm) {
        Modal.confirm({
          title: props.confirmText + "?",
          loading: true,
          onOk: () => {
            if (props.callback) {
              props
                .callback(props.selectItems)
                .then(() => {
                  Message.success(`${props.title}成功`);
                  Modal.remove();
                  emit("click");
                })
                .catch(() => {
                  Modal.remove();
                });
            } else {
              Modal.remove();
              emit("click");
            }
          },
          onCancel: () => {},
        });
      } else {
        if (props.callback) {
          props.callback(props.selectItems).then(() => {
            Message.success(`${props.title}成功`);
            emit("click");
          });
        } else {
          emit("click");
        }
      }
    };

    return () => {
      if (!props.authority || userAuthInfo.indexOf(props.authority) > -1) {
        if (props.type === "text") {
          return (
            <>
              {props.isDivider && <Divider type="vertical" />}
              <a type="text" onClick={btnClick}>
                <span style={{ color: props.btnInfo.color }}>
                  {props.title}
                </span>
              </a>
            </>
          );
        } else {
          return (
            <Button {...props.btnInfo} onClick={btnClick} style={props.style}>
              {props.title}
            </Button>
          );
        }
      } else {
        <span></span>;
      }
    };
  },
});
